<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {
        province: '110000',
        city1: '110100',
        city2: '110100',
        area: '110101',
      },
      option: {
        column: [{
          label: '省份',
          prop: 'province',
          type: 'select',
          cascader: ['city1', 'city2'],
          cascaderIndex: 1,
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `${baseUrl}/getProvince`
        },
        {
          width: 120,
          label: '城市1',
          prop: 'city1',
          type: 'select',
          cascader: ['area'],
          cascaderIndex: 1,
          cell: true,
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `${baseUrl}/getCity/{{key}}`,
          rules: [
            {
              required: true,
              message: '请选择城市1',
              trigger: 'blur'
            }
          ]
        },
        {
          width: 120,
          label: '城市2',
          prop: 'city2',
          type: 'select',
          cascaderIndex: 2,
          cell: true,
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `${baseUrl}/getCity/{{key}}`,
          rules: [
            {
              required: true,
              message: '请选择城市2',
              trigger: 'blur'
            }
          ]
        },
        {
          width: 120,
          label: '地区',
          prop: 'area',
          cell: true,
          props: {
            label: 'name',
            value: 'code'
          },
          type: 'select',
          dicUrl: `${baseUrl}/getArea/{{key}}?province={{province}}`,
          rules: [
            {
              required: true,
              message: '请选择地区',
              trigger: 'blur'
            }
          ]
        }
        ]
      }
    }
  }
}
</script>